<template>
  <div>

    <sky-panel title="跳转拦截">
      <template v-slot:handle>
        {{current}}
      </template>
      <template v-slot:main>
        <div>

          <sky-tabs v-model="current" :befor-jump="beforJump">
            <sky-tab-pane label="经营状况" value='0'></sky-tab-pane>
            <sky-tab-pane label="历史汇总" value='1'></sky-tab-pane>
            <sky-tab-pane label="审计方案" value='2'></sky-tab-pane>
            <sky-tab-pane label="方案审批" value='3'></sky-tab-pane>
          </sky-tabs>

        </div>
      </template>
    </sky-panel>

    <sky-code-panel>
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
        <code class="html">

          &lt;sky-tabs v-model="current" :befor-jump="beforJump"&gt;
            &lt;sky-tab-pane label="经营状况" value='0'&gt;&lt;/sky-tab-pane&gt;
            &lt;sky-tab-pane label="历史汇总" value='1'&gt;&lt;/sky-tab-pane&gt;
            &lt;sky-tab-pane label="审计方案" value='2'&gt;&lt;/sky-tab-pane&gt;
            &lt;sky-tab-pane label="方案审批" value='3'&gt;&lt;/sky-tab-pane&gt;
          &lt;/sky-tabs&gt;        
        </code>
        <code class="javascript">
          import { defineComponent, ref } from "vue";

          export default defineComponent({
            setup() {
              const current = ref("0");
              const beforJump=(tab,cb)=>{
                console.log(tab)
                // cb()
              }
              return {
                current,
                beforJump
              };
            },
          });
        </code>
    </pre>
      </div>
    </sky-code-panel>

  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from "vue";

  export default defineComponent({
    setup() {
      const current = ref("0");

      const beforJump = (tab, cb) => {
        console.log(tab);
        // cb()
      };

      return {
        current,
        beforJump,
      };
    },
  });
</script>
